<template>
  <div class="bargain views-container">
    <div class="other-settings views-container">
      <div class="wlm-form" style="position: relative;" v-loading="loading1">
        <div class="wlm-form-header">
          <div style="display:flex;justify-content:space-between;">
            <div>
               <span>小程序概况</span>
         <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
          更新时间：{{data_update_time1}}
          <el-button type="text" @click="updatabtn1">更新数据</el-button>
        </span>
            </div>
            <div>
              <el-select
                v-model="value1"
                placeholder="请选择"
                @change="changebtn1"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="dashboard-header">
          <el-row :gutter="8">
            <el-col :span="8" style="padding:20px">
              <div
                class="dashboard-header-item flex-col flex-justify-c flex-align-c"
              >
                <div
                  class="item-title"
                  style="font-size:18px;font-weight: bold;"
                >
                  累计用户数
                </div>
                <div style="font-size:16px;padding-top:10px;">
                  <div>{{ visit_total }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8" style="padding:20px">
              <div
                class="dashboard-header-item flex-col flex-justify-c flex-align-c"
              >
                <div
                  class="item-title"
                  style="font-size:18px;font-weight: bold;"
                >
                  转发次数
                  <!-- <el-button
                    type="text"
                    @click="clickpop(btn)"
                  >查看任务</el-button> -->
                </div>
                <div style="font-size:16px;padding-top:10px;">
                  <div>{{ share_pv }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8" style="padding:20px">
              <div
                class="dashboard-header-item flex-col flex-justify-c flex-align-c "
              >
                <div
                  class="item-title"
                  style="font-size:18px;font-weight: bold;"
                >
                  转发人数
                </div>
                <div style="font-size:16px;padding-top:10px;">
                  <div>{{ share_uv }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="wlm-form" style="position: relative;" v-loading="loading2">
        <div class="wlm-form-header">
          <div style="display:flex;justify-content:space-between;">
            <div>
              <span>访问趋势图</span>
         <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
          更新时间：{{data_update_time2}}
          <el-button type="text" @click="updatabtn2">更新数据</el-button>
        </span>
            </div>
            <div>
              <el-select
                v-model="value2"
                placeholder="请选择"
                @change="changebtn2"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="views-container">
          <div id="echart1"></div>
        </div>
      </div>
      <div class="wlm-form" v-loading="loading4">
          <div class="wlm-form-header">
            <div style="display:flex;justify-content:space-between;">
              <div>
                 <span>受访页</span>
                  <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
                    更新时间：{{data_update_time4}}
                    <el-button type="text" @click="lookStatics({type:num4,update:1})">更新数据</el-button>
                  </span>
              </div>
              <el-select
                v-model="value4"
                placeholder="请选择"
                @change="changebtn4"
              >
                <el-option
                  v-for="item in options4"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="views-container">
            <div id="echart3"></div>
          </div>
        </div>
      <section
        class="flex-row "
        style="display:flex;justify-content:space-between; flex-wrap:wrap;"
      >
        <div class="wlm-form" style="width:50%;" v-loading="loading3">
          <div class="wlm-form-header">
            <div style="display:flex;justify-content:space-between;">
                <div>
                  <span>地区分布</span>
                  <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
                    更新时间：{{data_update_time4}}
                    <el-button type="text" @click="updatabtn7">更新数据</el-button>
                  </span>
              </div>
              <el-select
                v-model="value3"
                placeholder="请选择"
                @change="changebtn3"
              >
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="views-container">
            <div id="echart2"></div>
          </div>
        </div>
        
      </section>
    </div>
  </div>
</template>
<script>
import {
  sAppData,
  accessTrends,
  regionalDistribution,
  visitPage
} from "@/api/basicdata";
import "../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据

export default {
  data() {
    return {
      num1:1,
      num2:1,
      num4:1,
      num5:1,
      data_update_time1:'',
      data_update_time2:'',
      data_update_time4:'',
      data_update_time5:'',
      visit_total: "",
      share_pv: "",
      share_uv: "",
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      value1: "1",
      value2: "1",
      value3: "1",
      value4: "1",
      options1: [
        {
          value: "1",
          label: "昨日"
        },
        {
          value: "2",
          label: "本周"
        },
        {
          value: "3",
          label: "上周"
        },
        {
          value: "4",
          label: "本月"
        },
        {
          value: "5",
          label: "上月"
        }
      ],
      options2: [
        {
          value: "1",
          label: "近一周"
        },
        {
          value: "2",
          label: "近一月"
        },
        {
          value: "3",
          label: "近三月"
        },
        {
          value: "4",
          label: "近一年"
        }
      ],
      options3: [
        {
          value: "1",
          label: "昨天"
        },
        {
          value: "2",
          label: "最近7天"
        },
        {
          value: "3",
          label: "最近30天"
        }
      ],
      options4: [
        {
          value: "1",
          label: "昨日"
        },
        {
          value: "2",
          label: "最近7天"
        },
        {
          value: "3",
          label: "最近30天"
        }
      ]
    };
  },
  created() {
    this.sAppDatabtn1();
    this.sAppDatabtn2();
  },
  mounted() {
    this.sAppDatabtn2();
    this.sAppDatabtn3();
    // this.sAppDatabtn4();
    this.lookStatics({type: 1});
  },
  methods: {
    changebtn4(type) {
      this.loading4 = true;
      this.num4 = type
      this.lookStatics({type});
    
    },
    changebtn3(event) {
      this.loading3 = true
      this.num5 = event
        regionalDistribution({type:event}).then(res=>{
          if(res.data.code==1){
            this.loading3 = false

            this.data_update_time4 = res.data.data.data_update_time
            let x = []
        
              let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            let value = Object.values(res.data.data)
            value.forEach(item=>{
              x.push({name:item.name.replace(/省/,''),value:item.value})
            })
            const myEchart = this.$echarts.init(
              document.getElementById("echart2"),
              "macarons"
            );
            myEchart.setOption({
             tooltip : {},
               dataRange: {
                  show: false,
                  min: 0,
                  max: 1000,
                  text: ['High', 'Low'],
                  realtime: true,
                  calculable: true,
                  color: ['orangered', 'yellow', 'lightskyblue']
                },
                 geo: { // 这个是重点配置区
                    map: 'china', // 表示中国地图
                    // roam: true,
                    label: {
                      normal: {
                        show: true, // 是否显示对应地名
                        textStyle: {
                          color: 'rgba(0,0,0,0.4)'
                        }
                      }
                    },
                    itemStyle: {
                      normal: {
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                      },
                      emphasis: {
                        areaColor: null,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  },
                   series: [
                    {
                      name: '', // 浮动框的标题
                      type: 'map',
                      geoIndex: 0,
                      data:x
                    }
                  ]
            })

          }
      })
    },
    changebtn2(event) {
      this.loading2 = true;
      this.num2 = event
      accessTrends({ type: event }).then(res => {
        if (res.data.code == 1) {
          this.loading2 = false;
           this.data_update_time2 = res.data.data.data_update_time
          delete res.data.data.data_update_time;
          const x = [];
          const series = [
            {
              name: "打开次数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "访问次数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "访问人数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "新用户数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "人均停留时长",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "次均停留时长",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "平均访问深度",
              type: "line",
              stack: "总量",
              data: []
            }
          ];
          const a = Object.values(res.data.data);
          a.forEach(item => {
            x.push(item.ref_date);
            series[0].data.push(item.session_cnt);
            series[1].data.push(item.visit_pv);
            series[2].data.push(item.visit_uv);
            series[3].data.push(item.visit_uv_new);
            series[4].data.push(item.stay_time_uv);
            series[5].data.push(item.stay_time_session);
            series[6].data.push(item.visit_depth);
          });

          const myEchart = this.$echarts.init(
            document.getElementById("echart1"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis"
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: [
                {
                  name: "打开次数"
                },
                {
                  name: "访问次数"
                },
                {
                  name: "访问人数"
                },
                {
                  name: "新用户数"
                },
                {
                  name: "人均停留时长"
                },
                {
                  name: "次均停留时长"
                },
                {
                  name: "平均访问深度"
                }
              ],
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
          });
        }
      });
    },
    changebtn1(event) {
      this.loading1 = true;
      this.num1 = event
      sAppData({ type: event }).then(res => {
        if (res.data.code == 1) {
          this.loading1 = false;
          this.visit_total = res.data.data.visit_total;
          this.share_pv = res.data.data.share_pv;
          this.share_uv = res.data.data.share_uv;
          console.log("fffffff", res);
        }
      })
    },
    updatabtn1(){
     this.loading1 = true;
      sAppData({ type: this.num1,update:1 }).then(res => {
        if (res.data.code == 1) {
          this.data_update_time1 = res.data.data.data_update_time
          this.loading1 = false;
          this.visit_total = res.data.data.visit_total;
          this.share_pv = res.data.data.share_pv;
          this.share_uv = res.data.data.share_uv;
        }
      });
    },
    updatabtn2(){
      this.loading2 = true;
      accessTrends({ type: this.num2,update:1 }).then(res => {
        if (res.data.code == 1) {
          this.loading2 = false;
          this.data_update_time2 = res.data.data.data_update_time
          delete res.data.data.data_update_time;
          const x = [];
          const series = [
            {
              name: "打开次数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "访问次数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "访问人数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "新用户数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "人均停留时长",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "次均停留时长",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "平均访问深度",
              type: "line",
              stack: "总量",
              data: []
            }
          ];
          const a = Object.values(res.data.data);
          a.forEach(item => {
            x.push(item.ref_date);
            series[0].data.push(item.session_cnt);
            series[1].data.push(item.visit_pv);
            series[2].data.push(item.visit_uv);
            series[3].data.push(item.visit_uv_new);
            series[4].data.push(item.stay_time_uv);
            series[5].data.push(item.stay_time_session);
            series[6].data.push(item.visit_depth);
          });

          const myEchart = this.$echarts.init(
            document.getElementById("echart1"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              // formatter:'{a0}:{c0}万'
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: [
                {
                  name: "打开次数"
                },
                {
                  name: "访问次数"
                },
                {
                  name: "访问人数"
                },
                {
                  name: "新用户数"
                },
                {
                  name: "人均停留时长"
                },
                {
                  name: "次均停留时长"
                },
                {
                  name: "平均访问深度"
                }
              ],
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
          });
        }
      });
    },
    updatabtn7(){
      this.loading3 = true
        regionalDistribution({type:this.num5,update:1}).then(res=>{
          if(res.data.code==1){
            this.loading3 = false
            this.data_update_time4 = res.data.data.data_update_time
            let x = []
        
              let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            let value = Object.values(res.data.data)
            value.forEach(item=>{
              x.push({name:item.name.replace(/省/,''),value:item.value})
            })
            const myEchart = this.$echarts.init(
              document.getElementById("echart2"),
              "macarons"
            );
            myEchart.setOption({
             tooltip : {},
               dataRange: {
                  show: false,
                  min: 0,
                  max: 1000,
                  text: ['High', 'Low'],
                  realtime: true,
                  calculable: true,
                  color: ['orangered', 'yellow', 'lightskyblue']
                },
                 geo: { // 这个是重点配置区
                    map: 'china', // 表示中国地图
                    // roam: true,
                    label: {
                      normal: {
                        show: true, // 是否显示对应地名
                        textStyle: {
                          color: 'rgba(0,0,0,0.4)'
                        }
                      }
                    },
                    itemStyle: {
                      normal: {
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                      },
                      emphasis: {
                        areaColor: null,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  },
                   series: [
                    {
                      name: '', // 浮动框的标题
                      type: 'map',
                      geoIndex: 0,
                      data:x
                    }
                  ]
            })

          }
      })
    },
    sAppDatabtn1() {
      this.loading1 = true;
      sAppData({ type: 1 }).then(res => {
        if (res.data.code == 1) {
          this.data_update_time1 = res.data.data.data_update_time
          this.loading1 = false;
          this.visit_total = res.data.data.visit_total;
          this.share_pv = res.data.data.share_pv;
          this.share_uv = res.data.data.share_uv;
        }
      });
    },
    sAppDatabtn2() {
      this.loading2 = true;
      accessTrends({ type: 1 }).then(res => {
        if (res.data.code == 1) {
          this.loading2 = false;
          this.data_update_time2 = res.data.data.data_update_time
          delete res.data.data.data_update_time;
          const x = [];
          const series = [
            {
              name: "打开次数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "访问次数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "访问人数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "新用户数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "人均停留时长",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "次均停留时长",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "平均访问深度",
              type: "line",
              stack: "总量",
              data: []
            }
          ];
          const a = Object.values(res.data.data);
          a.forEach(item => {
            x.push(item.ref_date);
            series[0].data.push(item.session_cnt);
            series[1].data.push(item.visit_pv);
            series[2].data.push(item.visit_uv);
            series[3].data.push(item.visit_uv_new);
            series[4].data.push(item.stay_time_uv);
            series[5].data.push(item.stay_time_session);
            series[6].data.push(item.visit_depth);
          });

          const myEchart = this.$echarts.init(
            document.getElementById("echart1"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              // formatter:'{a0}:{c0}万'
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: [
                {
                  name: "打开次数"
                },
                {
                  name: "访问次数"
                },
                {
                  name: "访问人数"
                },
                {
                  name: "新用户数"
                },
                {
                  name: "人均停留时长"
                },
                {
                  name: "次均停留时长"
                },
                {
                  name: "平均访问深度"
                }
              ],
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
          });
        }
      });
    },
    sAppDatabtn3() {
      this.loading3 = true
        regionalDistribution({type:1}).then(res=>{
          if(res.data.code==1){
            this.loading3 = false
            this.data_update_time4 = res.data.data.data_update_time
            let x = []
        
              let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            let value = Object.values(res.data.data)
            value.forEach(item=>{
              x.push({name:item.name.replace(/省/,''),value:item.value})
            })
            const myEchart = this.$echarts.init(
              document.getElementById("echart2"),
              "macarons"
            );
            myEchart.setOption({
             tooltip : {},
               dataRange: {
                  show: false,
                  min: 0,
                  max: 1000,
                  text: ['High', 'Low'],
                  realtime: true,
                  calculable: true,
                  color: ['orangered', 'yellow', 'lightskyblue']
                },
                 geo: { // 这个是重点配置区
                    map: 'china', // 表示中国地图
                    // roam: true,
                    label: {
                      normal: {
                        show: true, // 是否显示对应地名
                        textStyle: {
                          color: 'rgba(0,0,0,0.4)'
                        }
                      }
                    },
                    itemStyle: {
                      normal: {
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                      },
                      emphasis: {
                        areaColor: null,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  },
                   series: [
                    {
                      name: '', // 浮动框的标题
                      type: 'map',
                      geoIndex: 0,
                      data:x
                    }
                  ]
            })

          }
      })
    },
    lookStatics(param){
      this.loading4 = true;
      visitPage(param).then(res => {
       if (res.data.code == 1) {
          this.data_update_time4 = res.data.data.data_update_time
          delete res.data.data.data_update_time;
          let data = Object.values(res.data.data);//接口数据

          let yAxis = [];//存放左边标识
          let series = [];//存放对应数据和名称
          let y = []
          let arr = {
            page_visit_pv:'访问次数',
            page_visit_uv:'访问人数',
            page_staytime_pv:'次均停留时长',
            entrypage_pv:'进入页次数',
            exitpage_pv:'退出页次数',
            page_share_pv:'转发次数',
            page_share_uv:'转发人数',
          }
          yAxis = Object.keys(res.data.data);
          data.forEach((item,index) => {
            let i = 0;
            for(let key in item){
              if(!series[i]){
                series[i] = { 
                  name: key,//名字
                  type: 'bar',
                  data: [],//数据
                  barWidth: 20,
                }
              }
              if(series[i].name == key){
                series[i].data.push(item[key]);
              }
              i++;
            }
          })
          series.map(value => {
            value.name = arr[value.name];
            y.push(value.name)
          })
          console.log("gggggggggggggg",series)
          const myEchart = this.$echarts.init(
            document.getElementById("echart3"),
            "macarons"
          );
          myEchart.setOption({
           
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: y
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: yAxis,
              // axisLabel:{字体斜体
              //           interval: 0 ,
              //           rotate:40 
              //       }  
            },
           
            series: series
          });

          this.loading4 = false;


        }
      });
    },
    sAppDatabtn4() {
      this.loading4 = true;
      visitPage({ type: 1 }).then(res => {
       if (res.data.code == 1) {
          this.loading4 = false;
          this.data_update_time4 = res.data.data.data_update_time
           delete res.data.data.data_update_time;
            let data = Object.values(res.data.data);//接口数据
          let yAxis = [];//存放左边标识
          let series = [];//存放对应数据和名称
          let y = []
          let arr = {
            page_visit_pv:'访问次数',
            page_visit_uv:'访问人数',
            page_staytime_pv:'次均停留时长',
            entrypage_pv:'进入页次数',
            exitpage_pv:'退出页次数',
            page_share_pv:'转发次数',
            page_share_uv:'转发人数',
          }
          yAxis = Object.keys(res.data.data);
          data.forEach((item,index) => {
            let i = 0;
            for(let key in item){
              if(!series[i]){
                series[i] = { 
                  name: key,//名字
                  type: 'bar',
                  data: []//数据
                }
              }
              if(series[i].name == key){
                series[i].data.push(item[key]);
              }
              i++;
            }
          })
          series.map(value => {
            value.name = arr[value.name];
            y.push(value.name)
          })
          console.log("gggggggggggggg",series)
          const myEchart = this.$echarts.init(
            document.getElementById("echart3"),
            "macarons"
          );
          myEchart.setOption({
           
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: y
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: yAxis,
              axisLabel:{  
                        interval: 0 ,
                        rotate:40 
                    }  
            },
           
            series: series
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
#echart1 {
  width: 95%;
  height: 500px;
}
#echart2 {
  width: 730px;
  height: 500px;
}
#echart3 {
  width: 95%;
  height: 500px;
}
</style>
